<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>debug</title>
    <style>
        img {
            height: 15px;
            width: 15px;
        }

        .title > div {
            border: 1px #ff0000 solid;
            height: 30px;
            width: 100px;
        }
    </style>
</head>
<body>
<script>
    let arrowsRight = "https://gitee.com/Java1123yanglei/myPictureNew/raw/master/uPic/arrowsRighto57BeX.png";
    let arrowDown = "https://gitee.com/Java1123yanglei/myPictureNew/raw/master/uPic/arrowsDown2ALJ6p.png";
    window.onload = function () {
        for (let i = 0; i <= 3; i++) {
            document.getElementsByClassName("title")[i].onclick = function () {
                whetherToHide(i);
                // 获取 title  class , 添加 点击事件
            };
        }
    }

    function whetherToHide(index) {
        // TODO 如果该 ul 隐藏，显示它，
        let title = document.getElementsByClassName("title")[index];
        // 获取 title class
        let div = title.getElementsByTagName("div")[0];
        // 获取第一个 div
        let ul = title.getElementsByTagName("ul")[0];
        // 获取第一个 ul
        let img = div.getElementsByTagName("img")[0];
        if (ul.style.display === "none") {
            // ul 被隐藏，设置显示
            console.log("隐藏，设置显示");
            ul.style.display = "block";
            img.src = arrowDown;
        } else {
            // ul 被显示，设置隐藏
            // 设置隐藏
            console.log("显示，设置隐藏");
            ul.style.display = "none";
            img.src = arrowsRight;
            // 改变状态
        }
    }

</script>

<div class="title">
    <div><img src="https://gitee.com/Java1123yanglei/myPictureNew/raw/master/uPic/arrowsDown2ALJ6p.png" alt="箭头"> 朋友
    </div>
    <ul>
        <li>小张</li>
        <li>小李</li>
        <li>小王</li>
    </ul>
</div>
<div class="title">
    <div><img src="https://gitee.com/Java1123yanglei/myPictureNew/raw/master/uPic/arrowsDown2ALJ6p.png" alt="箭头"> 同学
    </div>
    <ul>
        <li>小明</li>
        <li>小孙</li>
        <li>小欧</li>
    </ul>
</div>
<div class="title">
    <div><img src="https://gitee.com/Java1123yanglei/myPictureNew/raw/master/uPic/arrowsDown2ALJ6p.png" alt="箭头"> 酒肉朋友
    </div>

    <ul>
        <li>洗哦啊</li>
        <li>校长</li>
        <li>李章</li>
    </ul>
</div>

</body>
</html>